<template>
  <div class="echart-container">
    <div style="position: relative;width: 100%; height: 100%;">
      <slot></slot>
      <div ref="chart" style="width: 100%; height: 100%;"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { useEcharts } from "@/hooks/useEcharts.js";

const props = defineProps({
  options: {
    type: Object,
    required: true,
  },
  mapData: {
    type: Object,
    required: false
  }
})

const chart = ref(null);
const echartsInstance = ref(null); // 使用ref定义并保持一致的命名
const { initChart, getEchartsInstance } = useEcharts();
onMounted(() => {
  initChart(chart.value, props.options, props.mapData);
  echartsInstance.value = getEchartsInstance(); // 正确赋值
});
// 监听options变化
watch(
    () => props.options,
    (newOptions) => {
      if (echartsInstance.value) {
        echartsInstance.value.setOption(newOptions);
      }
    },
    { deep: true }
)
</script>

<style scoped lang="scss">
.echart-container{
  background-color: #FFFFFF;
}
</style>